<template>
  <a-tooltip placement="bottom">
    <template slot="title">
      <span>列宽</span>
    </template>
    <a-input-number :min="30"
        style="margin-left: 10px" size="small" :step="1"
        :disabled="disabled" class="table-design-font-size"
        v-model="innerValue"
    />
  </a-tooltip>
</template>
<script>
import {createProps} from '@/utils';

export default {
  name: 'CellWidth',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    selection: createProps(Object, undefined),
    value: createProps(String),
    disabled: createProps(Boolean),
  },
  computed: {
    innerValue: {
      get() {
        if(!this.value) return 30;
        try {
          return parseInt((this.value + '').replace('px', '')) || 30;
        } catch (e) {}
        return 30;
      },
      set(v) {
        try {
          v = parseInt(v + "");
        } catch (e) {}
        this.$emit('change', `${v}px`);
        this.selection && this.selection.setTrStyle && this.selection.setWidth(`${v}px`);
      },
    }
  },
  methods: {

  }
}
</script>
<style>
.table-design-font-size .ant-input-number-handler-wrap {
  display: none;
}
</style>
